import React        from 'react';
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";



//搜索界面js
class ListSearch extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            searchKeyword   : '',
            startDate: '',
            endData:''
             
        };
     /*   this.handleChange = this.Change.bind(this);//日期。当选择的时候,这是第2个步骤

          this.changeTwo = this.Change2.bind(this);*/
     
    }


/*     Change(date) { //日期。当选择的时候,这是第3个步骤
    this.setState({
      startDate: date //日期。当选择的时候,这是第4个步骤
    });
  }

     Change2(date) {
    this.setState({
         twoData: date
    });
  }
*/

    // 数据变化的时候  获取输入框里的值
    onValueChange(e){
        let name    = e.target.name,
            value   = e.target.value.trim();
        this.setState({
            [name] : value//设置值
        });
    }
    // 点击搜索按钮的时候,给父级index.jsx .ch传值
    onSearch(){
        this.props.ch(this.state.startDate,this.state.endData,this.state.searchKeyword);
    }
    // 输入关键字后按回车，自动提交
    onSearchKeywordKeyUp(e){
        if(e.keyCode === 13){
            this.onSearch(); //调用上面的方法
        }
    }
    render(){
        return (


            <div className="row search-wrap">
                <div className="col-md-12">
                    <div className="form-inline">
                        <div className="form-group">
                            <select className="form-control"
                                name="searchType"
                                onChange={(e) => this.onValueChange(e)}>
                                <option value="userId">登陆账号名</option>
                            
                            </select>
                        </div>
                        <div className="form-group">
                            <input type="text" 
                                className="form-control" 
                                placeholder="输入用户ID"
                                name="searchKeyword"
                                onKeyUp={(e) => this.onSearchKeywordKeyUp(e)}
                                onChange={(e) => this.onValueChange(e)}/>
                        </div>


                        
                     <div className="form-group">
                         <a>开始日期:&nbsp;</a>
                            <input type="text" 
                                className="form-control" 
                                placeholder="格式为：2030-01-05"
                                name="startDate"
                                    onKeyUp={(e) => this.onSearchKeywordKeyUp(e)}
                                onChange={(e) => this.onValueChange(e)}/>
                      </div>
                      <div className="form-group">
                          <a>&nbsp;&nbsp;&nbsp;结束日期:&nbsp;</a>
                             <input type="text" 
                                className="form-control" 
                                placeholder="格式为：2030-01-05"
                                name="endData"
                                    onKeyUp={(e) => this.onSearchKeywordKeyUp(e)}
                                onChange={(e) => this.onValueChange(e)}/>
                      </div>
                       



                        <button className="btn btn-primary" 
                            onClick={(e) => this.onSearch()}>搜索</button>
                    </div>
                </div>
            </div>
        )
    }
}
export default ListSearch;